page-webcast-search-list {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    .toolbar-ios {
        .back {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .menu {
            width: 6.5vw;
            height: 5.5vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_menu.png);
            background-repeat: no-repeat;
        }
        .toolbar-title-ios {
            .nav-btn {
                height: 100%;
                color: #fff;
                background-color: transparent;
                font-size: 5vw;
                padding: 0;
                width: 87.5px;
                text-align: center;
                &_active {
                    color: rgb(255, 202, 55);
                }
            }
        }
    }
    ion-content {
        .content-ios {
            background: #fcfcfc;
        }
        .search-key-wrapper {
            background: linear-gradient(to right, #63b24c, #018c6e);
            border: none;
            border-radius: 6vw;
            display: flex;
            align-items: center;
            width: 88.89vw;
            height: 11.57vw;
            margin: 5.55vw auto;
            i {
                width: 4.5vw;
                height: 4.5vw;
                margin: auto 3vw auto 2vw;
                background-image: url(../assets/images/client/client-list/icon_search.png);
                background-size: cover;
                background-repeat: no-repeat;
            }
            input {
                width: 68vw;
                margin-left: 7.5vw;
                background: none;
                height: 7vw;
                border: none;
                font-size: 3.89vw;
                margin-right: 0;
                color: #fff;
                &::placeholder {
                    color: #fff;
                }

            }
        }
        .info-hd {
            margin: computed-vw(60) 0 computed-vw(60) computed-vw(60);
            .search-bar {
                float: left;
                width: computed-vw(1080-120);
                height: computed-vw(124);
                padding: 0 computed-vw(54);
                background: linear-gradient(to right, #63b24c, #018c6e);
                border-radius: computed-vw(62);
                input {
                    height: 100%;
                    font-size: computed-vw(45);
                    border: none;
                    padding: 0;
                    background: none;
                    color: #fff;
                    &::placeholder {
                        color: #fff;
                    }
                    &:focus {
                        outline: none;
                        border: none;
                    }
                }
                i {
                    float: right;
                    width: 4.5vw;
                    height: 4.5vw;
                    margin-top: (computed-vw(124) - 4.5)/2;
                    background-image: url(../assets/images/client/client-filter/icon_search.png);
                    background-size: 100% 100%;
                }
            }
            .button-ios {
                margin: 0 0 0 computed-vw(30);
                font-size: computed-vw(45);
                color: #fff;
                background-color: #f2b91c;
                height: computed-vw(124);
                border-radius: computed-vw(62);
                width: computed-vw(220);
                text-align: center;
            }
        }

        .search-item {
            display: inline-block;
            box-shadow: computed-vw(6) computed-vw(6) computed-vw(30) 0 rgba(0, 0, 0, 0.1);
            margin-bottom: computed-vw(60);
            overflow: hidden;
        }
        .search-item-image {
            width: computed-vw(315);
            height: computed-vw(225);
            float: left;
            position: relative;
        }

        .msl-card-img{
            width: computed-vw(315);
            height: computed-vw(225);
        }

        .search-item-other {
            margin-left: computed-vw(40);
            width: computed-vw(600);
            height: computed-vw(225);
            float: left;
        }
        .search-item-title {
            margin-top: computed-vw(10);
            font-size: computed-vw(45);
            height: computed-vw(125);
            color: #1F212A;
            overflow: hidden;
        }

        .search-item-time {
            margin-top: computed-vw(30);
            margin-buttom: computed-vw(30);
            font-size: computed-vw(33);
            color: #999;
        }

        .search-list {
            margin: computed-vw(60);
            clear: both;
        }

        .msl-card {
            width: computed-vw(208);
            height: computed-vw(74);
            line-height: computed-vw(74);
            border-radius: computed-vw(10);
            text-align: center;
            font-size: computed-vw(36);
            color: #fff;
            z-index: 10;
            &-living {
                background-color: #2cb265;
            }

            &-on-time {
                background-color: #f9ae40;
            }
        }

        .play-img-btn {
            position: absolute;
            left: computed-vw(110);
            top: computed-vw(64);
            width: computed-vw(96);
            height: computed-vw(96);
            background: url('../assets/images/webcast/icon_paly.png') no-repeat center ;
            background-size: computed-vw(96);
        }

        .fab-ios-light{
            background-color:transparent;
            width: 8.89vw;
            height: 8.89vw;
            padding:0;

            .go-up-icon{
                width: 8.89vw;
                height: 8.89vw;
                max-width: none;
            }
        }

        .clear-div{
            clear: both;
        }
    }
}

